// #modal {
//   position: fixed;
//   left: 0;
//   top: 0;
//   background-color: rgba($color: #000000, $alpha: 0.2);

//   left: 50%;
//   top: 50%;
//   transform: translate(-50%, -50%);
// }
.modalMask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}
.modalWrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  .modal {
    position: relative;
    margin: 0 auto;
    top: 100px;
    width: auto;
    max-width: calc(100vw - 32px);
    line-height: 1.5715;
    .modalContent {
      position: relative;
      width: 50%;
      margin: 0 auto;
      background-color: #fff;
      background-clip: padding-box;
      border: 0;
      border-radius: 2px;
      .modalHeader {
        padding: 16px 24px;
        border-bottom: 1px solid #f0f0f0;
        .modalClose {
          float: right;
          cursor: default;
        }
      }
      .modalBody {
        padding: 24px;
        font-size: 14px;
        line-height: 1.5715;
        word-wrap: break-word;
      }
      .modalFooter {
        padding: 10px 16px;
        border-top: 1px solid #f0f0f0;
        bottom: 10px;
        text-align: right;
      }
    }
  }
}
